<template>
  <div>
    <div class="container">
    <img src="../../static/img/home/logo.png" class="logo" alt="logo">

      <br><br><br><br><br><br>

    <div><img class="imgA" src="../../static/img/home/5.png" alt=""></div>


    <div class="navcu">
      <p> <span> <router-link :to="{ path: '/rule', query: {}}">ONE PERSON ONE ZONE | 一区一人</router-link></span></p>

      <br>
      <p> <span> <router-link :to="{ path: '/news', query: {}}">NEWS | 资讯</router-link></span></p>

    </div>

    <div><img  class="arrow" src="../../static/img/home/arrow.png" alt=""></div>

		<p style="margin-top:2rem;font-size:16px;">ABOUT US</p>

    <!-- <div class="fl" style="margin-top:5rem;">
      <p>
        <img class="imgG" src="../../static/img/home/1.jpg" alt="">
      </p>
      <p style="text-align:left;">啥地方放付付付付付付付付付付付付付付付付付付付付</p>
    </div> -->
    <br><br>
    <img style="width:100%;" src="../../static/img/home/1.jpg" alt="">

    <br><br>
    <p style="padding:10%;text-align:left;">好区多 关注新时代女性生活经济压力，旨在突破传统商业模式运 营的局限性，与智能化科技产业同进步，依托个性化数据体系， 立体化线上线下运营渠道，以一个住宅社区为单位，提供“一区一 人”的管理模式，为 “社区合伙人”提供利益共享，打造社交新零售 商业体系，为新时代女性提供北欧极简美学的生活方式。</p>

    <img style="width:70%;" src="../../static/img/home/2.jpg" alt="">
    <p style="padding:10%;text-align:left;">以精细的产品系列、严苛的选品规则，为新时代女性及家庭提供北欧极简美学的生活方式。</p>

    <img style="width:100%;" src="../../static/img/home/3.jpg" alt="">  

        <p style="padding:10%;text-align:left;">好区多Hatchdo，以社区为单位，吸引并孵化更多的事业合伙人， 所以整个徽标以“区” 为基本元素，经巧妙设计组合汇集构建而成;
“区”字行结构的三个三角图形，同时寓意着将从社区、社群、社交为 发展主体，形成稳健有力的铁三角。
同时，图形中只需再加入一个三角形，就可以沟通一个闭环四方形， 这也代表着好区多的成立的品牌理念，打造社区强而有力的闭环商业模式 ， 这也有“等你加入，共成大事”的寓意。</p>

<!-- 
    <div class="fl" style="margin-top:5rem;">
      <p style="text-align:left;">啥地方放付付付付付付付付付付付付付付付付付付付付</p>

      <p>
        <img class="imgG" src="../../static/img/home/home-1.png" alt="">
      </p>
    </div> -->

    <div class="nav2">
      <p> <span> <router-link :to="{ path: '/introduce', query: {}}">V V U好区多自主品牌</router-link></span></p>
      <br><br>
      <p> <span> <router-link :to="{ path: '/joinus', query: {}}">加入好区多</router-link></span></p>
	  </div>

    <img src="../../static/img/home/public.png" class="imgB" alt="logo">
    <br>
    <img src="../../static/img/home/wxmini.png" class="imgB" alt="logo">

    <div class="phone" style="margin: 5rem 0;">
      <p>VVU全国热线电话</p>
      <p style="font-size: 20px;">400 8888 8888</p>
      <br>
      <p>EMAIL</p>
      <p>service@hatchdo.com</p>
    </div>

    <p style="margin: 5rem 0;color: #6b8e87;" @click="toTop">
      ← BACK TO TOP
    </p>

        <!-- <img src="../../static/img/logo.png" alt="logo" style="width:70px;"> -->


    <!-- <div style="height:60px;padding: 0 1.2rem;" class="row container">

      <router-link :to="{ path: '/', query: {}}" class="col-2 text-left">
        <img src="../../static/img/logo.png" alt="logo" style="width:70px;">
      </router-link>
      <div class="col-4">
      </div>
      <div v-if="lslogin === 1" class="col-6 text-right"  style="padding-top:25px;">
        <p class="small">用户 {{userinfo.username.substring(0,2)}}***{{userinfo.username.substring(9,11)}} <span @click="loginout">[退出]</span> </p>
      </div>
      <div v-else-if="lslogin === 0"></div>
      <div v-else class="col-6 text-right"  style="padding-top:20px;">
        <router-link :to="{ path: '/login', query: {}}"><button type="button" class="btn btn-light btn-sm">登录</button></router-link>
        <router-link :to="{ path: '/register', query: {}}"><button type="button" class="btn btn-light btn-sm">注册</button></router-link>
      </div>
    </div> -->

    <!-- <ul class="nav nav-pills container" style="padding:1rem 2rem;">
      <li class="nav-item">
        <router-link class="nav-link active" :to="{ path: '/', query: {}}">常用网站</router-link>
      </li>

      <li class="nav-item">
        <router-link class="nav-link" :to="{ path: '/remind', query: {}}">还款提醒</router-link>
      </li>
      
      <li class="nav-item">
        <router-link class="nav-link" :to="{ path: '/stockindex', query: {}}">大盘指数</router-link>
      </li>

      <li class="nav-item">
        <router-link class="nav-link" :to="{ path: '/news', query: {}}">热门新闻</router-link>
      </li>

    </ul> -->

    <!-- <div style="height:20px;background-color:#e9ecef73"></div>

    <div class="container-fluid container" style="padding:2rem;">
      <div class="row">

        <div class="col-6 col-sm-6 col-md-4 col-lg-4 col-xl-4" v-for = "(item, index) in siteList" :index="index" :key="item.index">
          <div class="card" @click="openurl(item.url)">
            <div class="card-body">
              <p class="com text-right">{{ item.score }}</p>
              <p class="card-text"> {{item.name}} </p>
              <p class="des">{{ item.description }}</p>
              <div class="progress" style="height:5px;">
                <div  v-bind:style="{ width: item.score*20  + '%' }" class="progress-bar progress-bar-striped"></div>
              </div>
            </div>
          </div>
        </div>
     
      </div>
    </div> -->
    </div>
    <!-- foot -->
    <Footer/>

  </div>
</template>

<script>
import Footer from '../components/Footer.vue'

export default {
  components: {
    Footer
  },
  data () {
    return {
      lslogin: 0,
      token: '',
      userinfo: {},
      nowIndex: [],
      moreIndex: []
    }
  },
  created() {
    window.scrollTo(0,0);
  },
  methods: {
    toTop() {
      window.scrollTo(0,0);
    },
    loginout() {
      localStorage.removeItem('token')
      // go(0)有兼容问题
      // this.$router.go(0)
      location.reload()
    },
    go () {
      this.$router.push('/moreindex')
    },
    openurl(url) {
      window.open(url+'?track=07ge.com')
    },
  // 注册
  getSite() {
    // this.$axios.get('/website/siteList').then(({status,data})=>{
    //     if(status===200){
    //       if(data&&data.code === 1){
    //         console.log('this.middleList', data.data.favorite)
    //         this.middleList = data.data.favorite
    //       } else if(data&&data.code === 0) {
    //         this.middleList = data.data
    //       } else {
    //       }
    //     }else{
    //       this.error=`服务器出错`
    //     }
    //   })
    }
  }  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  /* color: #42b983; */
  text-decoration:none
}
.card {
   height:170px;
   margin-bottom:2rem;
   .card-body {
     .des {
      //  height:25px;
       font-size: 10px;
       color: #bbb;
       margin: 20px 0;
     }
     .com {
       font-size: 10px;
      //  margin: 10px;
     }
   }
}
.nav-link.active {
  background-color: #409eff;
}
.logo {
  margin-top: 8rem;
  width:40%;
  max-width:300px
}

.navcu {
  padding-top: 5rem;
}

.navcu>p>span {
  /* background-color: #6b8e87; */
  color: #6b8e87;
  padding: 0.5rem 1rem;
}
.navcu>p>span>a {
  font-size: 14px;
  color: #6b8e87;
  border-bottom: 1px solid #6b8e87;
  padding-bottom: 3px;
}
.des {
  color: #888;
  font-size: 12px;
}
.arrow {
  margin-top: 8rem;
  width: 1.5rem;
  max-width:300px
}
.fl {
  display: flex;
  align-items: center;
  p {
    flex: 1;
  }
}
.imgG{
  width:80%;
  max-width:300px;
}
.imgA{
  width:45%;
  max-width:300px;
}
.imgB{
  padding-top: 4rem;
  width:30%;
  max-width:150px;
}
.nav2 {
  padding-top: 3rem;
}

.nav2>p>span {
  background-color: #6b8e87;
  color: #fff;
  padding: 0.5rem 1rem;
}
.nav2>p>span>a {
  font-size: 14px;
  color: #fff;
  border-bottom: 1px solid #fff;
  padding-bottom: 3px;
}

</style>
